import { Flex} from 'antd-mobile';
import React, { Component } from 'react';
import './search.css/new.css';
import { getNew } from '../../api';

class New extends Component{
    constructor(){
        super()
        this.state={
            list:[]
        }
    }
    componentDidMount(){
        getNew().then(res=>{
            this.setState({
                list: res.data.albums.splice(0, 3)
            })
        })
    }
    render(){
        return(
            <div className='searchNew'>
               <div className='searchNew-two'>
                    <h2>新碟</h2>
                    <h4>更多新碟</h4>
                </div>
                {this.state.list.map((item,index)=>{
                    return (
                        <div key={index}>
                            <Flex className='searchNew-one'>
                                <Flex.Item >                                                                         
                                       <img src={item.picUrl} alt=""/>
                                       <span>{item.name}</span>
                                </Flex.Item>                              
                            </Flex>
                        </div>
                    )
                })}
                 
            </div>
        )
    }
}

export default New